import React, { useEffect } from 'react';
import type { UploadProps } from 'antd';
import { message, Upload } from 'antd';
import './App.scss';
const { Dragger } = Upload;

const props: UploadProps = {
  name: 'file',
  multiple: true,
  maxCount: 3,
  action: 'https://run.mocky.io/v3/435e224c-44fb-4773-9faf-380c5e6a2188', //替换成实际的上传的地址
  onChange(info) {
    const { status } = info.file;
    if (status !== 'uploading') {
      console.log(info.file, info.fileList);
    }
    if (status === 'done') {
      message.success(`${info.file.name} 文件上传成功！`);
    } else if (status === 'error') {
      message.error(`${info.file.name} 文件上传失败！`);
    }
  },
  onDrop(e) {
    console.log('Dropped files', e.dataTransfer.files);
  },
};

const UploadFile: React.FC = () => (
  <Dragger {...props} className="dragger-content">
    <div className="upload-content">
      <p className="ant-upload-drag-icon">
        <div className="btn_sel">
          <button className="button">
            <div className="container">
              <div className="folder folder_one"></div>
              <div className="folder folder_two"></div>
              <div className="folder folder_three"></div>
              <div className="folder folder_four"></div>
            </div>
            <div className="active_line"></div>
            <span className="text">选择文件</span>
          </button>
        </div>
      </p>
      <p className="ant-upload-text">单击或拖动升级文件到此区域进行上传</p>
      <p className="ant-upload-hint">
        支持单个或批量上传且最多三个，严禁上传公司数据或其他被禁止的文件！
      </p>
    </div>
  </Dragger>
);

export default UploadFile;
